<template>
    <el-skeleton :loading="loading" animated>
        <template #template>
            <div style="text-align:center;display:flex;padding-bottom: 30px;">
                <div style="width:16.6%" v-for="n in 6">
                    <el-skeleton-item variant="image" style="height:175px;width:175px;border-radius: 50%;" />
                    <!-- <el-skeleton-item variant="h3" style="width:25%;" /> -->
                </div>
            </div>
        </template>
        <template #default>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane :label="item.type_name" :name="item.type_id" v-for="item in typeList">
                    <el-row style="text-align:center;">
                        <el-col :span="4" v-for="item in singerList">
                            <a href="">
                                <el-image class="re_singer" :src="item.img1v1Url">
                                    <div slot="placeholder" class="image-slot">
                                        <i class="iconfont icon-placeholder"></i>
                                    </div>
                                </el-image>
                                <div class="singer_name">{{item.name}}</div>
                            </a>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </template>
    </el-skeleton>
</template>

<script>
import { artist } from '@apis/http'
import { ElNotification } from 'element-plus'

export default {
    data() {
        return {
            singerList: [],
            typeList: [
                {
                    "type_id": 1,
                    "type_name": "华语",
                },
                {
                    "type_id": 2,
                    "type_name": "欧美",
                },
                {
                    "type_id": 3,
                    "type_name": "韩国",
                },
                {
                    "type_id": 4,
                    "type_name": "日本",
                },
            ],
            activeName: '',
            loading: ''
        };
    },
    methods: {
        handleClick(tab, event) {
            //获取tabs切换时的name
            let beforeTabId = event.target.getAttribute('id');
            let type_id = beforeTabId.split('-')[1];
            artist({
                type: type_id
            }).then(res => {
                // console.log(JSON.stringify(res.data));
                if (res.code === 200) {
                    this.singerList = res.list.artists.slice(0, 6);
                } else {
                    ElNotification({
                        type: 'error',
                        title: '提示',
                        message: '接口请求错误，请查看artist()接口',
                    })
                }
            }).catch(res => {
                // console.log(JSON.stringify(res));
                ElNotification({
                    type: 'error',
                    duration: 0,
                    title: '提示',
                    message: res.message + ",url=" + res.config.url,
                })
            })
        },
    },
    created: function () {
        artist({}).then(res => {
            // console.log(JSON.stringify(res));
            if (res.code === 200) {
                this.singerList = res.list.artists.slice(0, 6);
                this.activeName = this.typeList[0].type_id;
                this.loading = false
            } else {
                ElNotification({
                    type: 'error',
                    title: '提示',
                    message: '接口请求错误，请查看artist()接口',
                })
            }
        }).catch(res => {
            // ElNotification({
            //     type: 'error',
            //     duration: 0,
            //     title: '提示',
            //     message: res.message + ",url=" + res.config.url,
            // })
            this.activeName = this.typeList[0].type_id;
            this.loading = false
            this.singerList = [
                {
                    "name": "林俊杰",
                    "id": 3684,
                    "picId": 109951167878710660,
                    "img1v1Id": 109951167878713400,
                    "briefDesc": "",
                    "picUrl": "https://p1.music.126.net/7636PzUiFMETHU7SAr05FA==/109951167878710661.jpg",
                    "img1v1Url": "https://p1.music.126.net/thrEGQSfLQp0Kd6M5yBEEg==/109951167878713410.jpg",
                    "albumSize": 58,
                    "alias": [
                        "JJ Lin",
                        "Wayne Lim"
                    ],
                    "trans": "",
                    "musicSize": 530,
                    "topicPerson": 31009,
                    "lastRank": 0,
                    "score": 62344640,
                    "picId_str": "109951167878710661",
                    "img1v1Id_str": "109951167878713410"
                },
                {
                    "name": "陈奕迅",
                    "id": 2116,
                    "picId": 109951166115915090,
                    "img1v1Id": 109951166115911710,
                    "briefDesc": "",
                    "picUrl": "https://p1.music.126.net/w_vuv9hBWq2hlJxJcmJrjg==/109951166115915081.jpg",
                    "img1v1Url": "https://p1.music.126.net/rYYhHXZHwCfizE0N46F37Q==/109951166115911716.jpg",
                    "albumSize": 126,
                    "alias": [
                        "Eason Chan",
                        "Chan Yick Shun"
                    ],
                    "trans": "",
                    "musicSize": 1776,
                    "topicPerson": 21322,
                    "lastRank": 1,
                    "score": 62172687,
                    "picId_str": "109951166115915081",
                    "img1v1Id_str": "109951166115911716"
                },
                {
                    "name": "薛之谦",
                    "id": 5781,
                    "picId": 109951165034938860,
                    "img1v1Id": 109951165034950660,
                    "briefDesc": "",
                    "picUrl": "https://p1.music.126.net/LCWqYYKoCEZKuAC3S3lIeg==/109951165034938865.jpg",
                    "img1v1Url": "https://p1.music.126.net/1tSJODTpcbZvNTCdsn4RYA==/109951165034950656.jpg",
                    "albumSize": 24,
                    "alias": [
                        "Joker Xue"
                    ],
                    "trans": "",
                    "musicSize": 250,
                    "topicPerson": 106708,
                    "lastRank": 2,
                    "score": 61621505,
                    "picId_str": "109951165034938865",
                    "img1v1Id_str": "109951165034950656"
                },
                {
                    "name": "G.E.M.邓紫棋",
                    "id": 7763,
                    "picId": 109951167773880640,
                    "img1v1Id": 109951167771736530,
                    "briefDesc": "",
                    "picUrl": "https://p1.music.126.net/fq1O8ZRT5_FHzg_uLEtUQA==/109951167773880633.jpg",
                    "img1v1Url": "https://p1.music.126.net/oJorrgJ3IotZUAbZkBMuFw==/109951167771736533.jpg",
                    "albumSize": 51,
                    "alias": [
                        "G.E.M."
                    ],
                    "trans": "",
                    "musicSize": 368,
                    "topicPerson": 13035,
                    "lastRank": 3,
                    "score": 61336630,
                    "picId_str": "109951167773880633",
                    "img1v1Id_str": "109951167771736533"
                },
                {
                    "name": "告五人",
                    "id": 12676697,
                    "picId": 109951166497731340,
                    "img1v1Id": 109951167433999710,
                    "briefDesc": "",
                    "picUrl": "https://p1.music.126.net/CZQqBzVxVRTvAeJFuAmpug==/109951166497731343.jpg",
                    "img1v1Url": "https://p1.music.126.net/sFAifnpKoWw0vNihjBJ-ZQ==/109951167433999712.jpg",
                    "albumSize": 19,
                    "alias": [
                        "Accusefive"
                    ],
                    "trans": "",
                    "musicSize": 48,
                    "topicPerson": 906,
                    "lastRank": 4,
                    "score": 60169480,
                    "picId_str": "109951166497731343",
                    "img1v1Id_str": "109951167433999712"
                },
                {
                    "name": "队长",
                    "id": 1143033,
                    "picId": 109951164546544260,
                    "img1v1Id": 109951167573473140,
                    "briefDesc": "",
                    "picUrl": "https://p1.music.126.net/CsGY6JmX21cxa-5DZKIqpQ==/109951164546544248.jpg",
                    "img1v1Url": "https://p1.music.126.net/i602BtKvl61sUsTY5tqnnA==/109951167573473133.jpg",
                    "albumSize": 40,
                    "alias": [
                        "杨浪，youngcaptain"
                    ],
                    "trans": "",
                    "musicSize": 99,
                    "topicPerson": 458,
                    "lastRank": 5,
                    "score": 59897243,
                    "picId_str": "109951164546544248",
                    "img1v1Id_str": "109951167573473133"
                }
            ]
        })
    }
}
</script>

<style scoped>
.re_singer {
    width: 175px;
    border-radius: 50%;
}

.singer_name {
    margin-top: 10px;
    margin-bottom: 30px;
}
</style>